import React from 'react';
import './AlertPanel.css';
import Tooltip from '@tippyjs/react';
interface Alert {
  id: string;
  type: 'warning' | 'error' | 'info';
  title: string;
  time: string;
  status: string;
  relatedIndicators: string[];
  timeRange: string;
}
import 'tippy.js/dist/tippy.css';
const alerts: Alert[] = [
  {
    id: 'ALT001',
    type: 'warning',
    title: '三相水表1能耗异常',
    time: '2025-03-18 12:50',
    status: '待处理',
    relatedIndicators: ['设备运行效率', '能源利用率'],
    timeRange: '12:40-12:50',
  },
  {
    id: 'ALT002',
    type: 'error',
    title: '三相水表3离线',
    time: '2025-03-18 12:45',
    status: '处理中',
    relatedIndicators: ['设备健康度', '系统稳定性'],
    timeRange: '12:35-12:45',
  },
  {
    id: 'ALT003',
    type: 'info',
    title: '系统更新完成',
    time: '2025-03-18 12:30',
    status: '已完成',
    relatedIndicators: ['系统稳定性'],
    timeRange: '12:20-12:30',
  }, {
    id: 'ALT003',
    type: 'info',
    title: '系统更新完成',
    time: '2025-03-18 12:30',
    status: '已完成',
    relatedIndicators: ['系统稳定性'],
    timeRange: '12:20-12:30',
  },
];

const AlertPanel: React.FC<{ alarmPageNum: number, setAlarmPageNum: (pageNum: number) => void, alarmStatistics: any, alarmDetail: any }> = ({ alarmPageNum, setAlarmPageNum, alarmStatistics, alarmDetail }) => {
  const total = alarmDetail?.totalElements

  return (
    <div className="alert-panel">
      <div className="alert-content">
        <div className="alert-header">
          <div className="alert-stats">
            <div className="stat-item error">
              <span className="stat-value"><img src="/红警告@3x.png" alt="" /> {alarmStatistics?.level1}</span>
              <span className="stat-label">①级/红色重大事项</span>
            </div>
            <div className="stat-item warning">
              <span className="stat-value"><img src="/橙警告@3x.png" alt="" /> {alarmStatistics?.level2}</span>
              <span className="stat-label">②级/橙色
                高风险事项
              </span>
            </div>
            <div className="stat-item info">
              <span className="stat-value"><img src="/黄警告@3x.png" alt="" /> {alarmStatistics?.level3}</span>
              <span className="stat-label">③级/黄色

                中风险事项</span>
            </div> <div className="stat-item info">
              <span className="stat-value"><img src="/蓝警告@3x.png" alt="" /> {alarmStatistics?.level4}</span>
              <span className="stat-label">④级/蓝色
                一般事项</span>
            </div>
          </div>
        </div>


        <div className='alert-table'>
          <div className='title' style={{ fontSize: '22px', fontWeight: 'bold', }}>告警明细</div>

          <table>
            <thead>
              <tr>
                <th>时间</th>
                <th>指标</th>
                <th>告警信息</th>
              </tr>
            </thead>
            <tbody>
              {alarmDetail?.content?.map((alert: any, index: number) => {
                // 只展示三条数据 
                if (index > 2) {
                  return null;
                }
                return (
                  <tr key={alert.id}>
                    <Tooltip content={alert.alarmTime} className='my-tooltip'>
                      <td data-tip={alert.alarmTime}>{alert.alarmTime}</td>
                    </Tooltip>
                    <Tooltip content={alert.alarmMetric} className='my-tooltip'>
                      <td data-tip={alert.alarmMetric}>{alert.alarmMetric}</td>
                    </Tooltip>
                    <Tooltip content={alert.alarmInfo} className='my-tooltip'>
                      <td data-tip={alert.alarmInfo}>{alert.alarmInfo}</td>
                    </Tooltip>
                  </tr>
                )
              })}
            </tbody>
          </table>

          {/* 分页器 */}
          <div className='pagination'>
            <div className='pagination-item' style={{ cursor: alarmPageNum === 1 ? 'not-allowed' : 'pointer' }} onClick={() => {
              if (alarmPageNum === 1) return;
              setAlarmPageNum(alarmPageNum - 1)
            }}>{'<'}</div>
            {/* <span className='pagination-item'>1</span> */}
            {/* <span className='pagination-item'>2</span> */}
            {/* <span className='pagination-item'>3</span> */}
            <div className='pagination-item' onClick={() => setAlarmPageNum(alarmPageNum + 1)}>{'>'}</div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default AlertPanel;
